<script setup>
import {onMounted, ref} from 'vue';
import AppPage from "@/pages/admin/layouts/AppPage.vue";

// 模拟数据
const systemInfo = ref({
    laravelVersion: '12.34.0',
    mysqlVersion: '8.0.33',
    vueVersion: '3.5.22',
    phpVersion: '8.2',
    serverOS: 'Ubuntu 22.04',
    lastBoot: '2025-10-18 08:30:45'
});

const updateRecords = ref([
    { id: 1, version: 'v2.5.1', date: '2025-10-15', content: '优化系统性能，修复已知问题' },
    { id: 2, version: 'v2.5.0', date: '2025-10-01', content: '新增内容分析模块' },
    { id: 3, version: 'v2.4.3', date: '2025-09-20', content: '安全更新和界面优化' }
]);

const memos = ref([
    { id: 1, content: '周一进行系统备份', completed: false },
    { id: 2, content: '更新用户使用文档', completed: true },
    { id: 3, content: '检查服务器日志', completed: false }
]);

const newMemo = ref('');
const currentDate = ref(new Date());

// 添加新备忘录
const addMemo = () => {
    if (newMemo.value.trim()) {
        memos.value.push({
            id: Date.now(),
            content: newMemo.value.trim(),
            completed: false
        });
        newMemo.value = '';
    }
};

// 切换备忘录状态
const toggleMemo = (id) => {
    const memo = memos.value.find(m => m.id === id);
    if (memo) memo.completed = !memo.completed;
};

// 删除备忘录
const deleteMemo = (id) => {
    memos.value = memos.value.filter(m => m.id !== id);
};

// 获取日历日期
const getCalendarDays = () => {
    const year = currentDate.value.getFullYear();
    const month = currentDate.value.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const days = [];

    // 上个月末尾几天
    for (let i = firstDay.getDay(); i > 0; i--) {
        days.push({ date: new Date(year, month, -i + 1), isCurrent: false });
    }

    // 当前月
    for (let i = 1; i <= lastDay.getDate(); i++) {
        days.push({ date: new Date(year, month, i), isCurrent: true });
    }

    return days;
};

// 切换月份
const changeMonth = (direction) => {
    currentDate.value = new Date(
        currentDate.value.getFullYear(),
        currentDate.value.getMonth() + direction,
        1
    );
};

onMounted(() => {
    // 图表初始化可以在这里实现
});
</script>

<template>
    <app-page title="仪表盘概览">
        <!-- 统计卡片区域 -->
        <div class="dashboard-section">
            <h2 class="section-title">数据概览</h2>
            <div class="stats-cards">
                <div class="stat-card card-1">
                    <div class="card-icon">📝</div>
                    <div class="card-content">
                        <h3>文章总数</h3>
                        <div class="value">1,284</div>
                        <div class="trend up">↑ 12% 较上月</div>
                    </div>
                </div>

                <div class="stat-card card-2">
                    <div class="card-icon">📂</div>
                    <div class="card-content">
                        <h3>分类总数</h3>
                        <div class="value">42</div>
                        <div class="trend up">↑ 5% 较上月</div>
                    </div>
                </div>

                <div class="stat-card card-3">
                    <div class="card-icon">🏷️</div>
                    <div class="card-content">
                        <h3>标签总数</h3>
                        <div class="value">156</div>
                        <div class="trend down">↓ 2% 较上月</div>
                    </div>
                </div>

                <div class="stat-card card-4">
                    <div class="card-icon">📦</div>
                    <div class="card-content">
                        <h3>草稿箱总数</h3>
                        <div class="value">23</div>
                        <div class="trend up">↑ 8% 较上月</div>
                    </div>
                </div>

                <div class="stat-card card-5">
                    <div class="card-icon">👀</div>
                    <div class="card-content">
                        <h3>浏览总数</h3>
                        <div class="value">58,742</div>
                        <div class="trend up">↑ 22% 较上月</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表和主要内容区域 -->
        <div class="main-content-grid">
            <!-- 左侧内容 -->
            <div class="content-column">
                <div class="chart-container card">
                    <div class="chart-header">
                        <h2>内容发布趋势</h2>
                        <div class="chart-actions">
                            <select id="timeRange">
                                <option value="week">最近一周</option>
                                <option selected value="month">最近一月</option>
                                <option value="quarter">最近一季度</option>
                            </select>
                        </div>
                    </div>
                    <div class="chart-placeholder">
                        <div class="chart-mock">
                            <div class="mock-bar" style="height: 70%"></div>
                            <div class="mock-bar" style="height: 85%"></div>
                            <div class="mock-bar" style="height: 60%"></div>
                            <div class="mock-bar" style="height: 90%"></div>
                            <div class="mock-bar" style="height: 75%"></div>
                            <div class="mock-bar" style="height: 80%"></div>
                            <div class="mock-bar" style="height: 95%"></div>
                        </div>
                    </div>
                </div>

                <div class="quick-actions card">
                    <h2>快捷操作</h2>
                    <div class="actions-grid">
                        <div class="action-card">
                            <div class="action-icon action-1">+</div>
                            <div class="action-text">
                                <h4>新建文章</h4>
                                <p>创建新的博客文章</p>
                            </div>
                        </div>

                        <div class="action-card">
                            <div class="action-icon action-2">📊</div>
                            <div class="action-text">
                                <h4>查看统计</h4>
                                <p>详细的数据分析</p>
                            </div>
                        </div>

                        <div class="action-card">
                            <div class="action-icon action-3">⚙️</div>
                            <div class="action-text">
                                <h4>系统设置</h4>
                                <p>调整系统参数</p>
                            </div>
                        </div>

                        <div class="action-card">
                            <div class="action-icon action-4">👥</div>
                            <div class="action-text">
                                <h4>用户管理</h4>
                                <p>管理用户和权限</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧侧边栏 -->
            <div class="sidebar-column">
                <!-- 系统信息 -->
                <div class="system-info card">
                    <h2>系统信息</h2>
                    <div class="info-list">
                        <div class="info-item">
                            <span class="info-label">Laravel版本</span>
                            <span class="info-value">{{ systemInfo.laravelVersion }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">MySQL版本</span>
                            <span class="info-value">{{ systemInfo.mysqlVersion }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">Vue版本</span>
                            <span class="info-value">{{ systemInfo.vueVersion }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">PHP版本</span>
                            <span class="info-value">{{ systemInfo.phpVersion }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">服务器系统</span>
                            <span class="info-value">{{ systemInfo.serverOS }}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">最后启动</span>
                            <span class="info-value">{{ systemInfo.lastBoot }}</span>
                        </div>
                    </div>
                </div>

                <!-- 更新记录 -->
                <div class="updates-card card">
                    <h2>更新记录</h2>
                    <div class="updates-list">
                        <div v-for="update in updateRecords" :key="update.id" class="update-item">
                            <div class="update-header">
                                <span class="update-version">{{ update.version }}</span>
                                <span class="update-date">{{ update.date }}</span>
                            </div>
                            <p class="update-content">{{ update.content }}</p>
                        </div>
                    </div>
                </div>

                <!-- 备忘录 -->
                <div class="memo-card card">
                    <div class="memo-header">
                        <h2>备忘录</h2>
                    </div>
                    <div class="memo-input">
                        <input
                            v-model="newMemo"
                            placeholder="添加新备忘录..."
                            type="text"
                            @keyup.enter="addMemo"
                        >
                        <button @click="addMemo">添加</button>
                    </div>
                    <div class="memo-list">
                        <div v-for="memo in memos" :key="memo.id"
                             :class="['memo-item', { completed: memo.completed }]">
                            <div class="memo-content">
                                <input
                                    :checked="memo.completed"
                                    type="checkbox"
                                    @change="toggleMemo(memo.id)"
                                >
                                <span>{{ memo.content }}</span>
                            </div>
                            <button class="memo-delete" @click="deleteMemo(memo.id)">×</button>
                        </div>
                    </div>
                </div>

                <!-- 日历 -->
                <div class="calendar-card card">
                    <div class="calendar-header">
                        <button @click="changeMonth(-1)">‹</button>
                        <h3>{{ currentDate.toLocaleString('default', { month: 'long', year: 'numeric' }) }}</h3>
                        <button @click="changeMonth(1)">›</button>
                    </div>
                    <div class="calendar-grid">
                        <div v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day" class="calendar-weekday">
                            {{ day }}
                        </div>
                        <div v-for="(day, index) in getCalendarDays()" :key="index"
                             :class="['calendar-day', { 'current-month': day.isCurrent }]">
                            {{ day.date.getDate() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-page>
</template>

<style lang="scss" scoped>
.dashboard-section {
    margin-bottom: 30px;
}

.section-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 600;
}

.card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }
}

/* 统计卡片样式优化 */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: 4px solid;

    &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .card-icon {
        font-size: 2.5rem;
        margin-right: 16px;
        opacity: 0.9;
    }

    .card-content {
        flex: 1;

        h3 {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .value {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 4px;
            background: linear-gradient(135deg, #2c3e50, #3498db);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .trend {
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            font-weight: 500;

            &.up { color: #2ecc71; }
            &.down { color: #e74c3c; }
        }
    }
}

/* 主内容网格布局 */
.main-content-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

/* 图表容器 */
.chart-container {
    grid-column: 1;

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h2 {
            font-size: 1.3rem;
            color: #2c3e50;
            font-weight: 600;
        }
    }

    .chart-placeholder {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        height: 300px;
    }

    .chart-mock {
        display: flex;
        align-items: end;
        justify-content: space-around;
        height: 100%;
        padding: 20px 0;

        .mock-bar {
            background: linear-gradient(to top, #3498db, #2980b9);
            width: 40px;
            border-radius: 4px;
            transition: all 0.3s ease;

            &:hover {
                transform: scale(1.05);
                opacity: 0.8;
            }
        }
    }
}

/* 快捷操作 */
.quick-actions {
    .actions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .action-card {
        display: flex;
        align-items: center;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
            background: #e9ecef;
            transform: translateX(4px);
        }

        .action-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .action-text {
            h4 {
                font-size: 1rem;
                margin-bottom: 4px;
                color: #2c3e50;
            }

            p {
                font-size: 0.85rem;
                color: #7f8c8d;
            }
        }
    }
}

/* 侧边栏卡片通用样式 */
.sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 系统信息样式 */
.system-info {
    h2 {
        margin-bottom: 16px;
        color: #2c3e50;
        font-size: 1.2rem;
    }

    .info-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
            border-bottom: none;
        }

        .info-label {
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        .info-value {
            color: #2c3e50;
            font-weight: 500;
            font-family: 'Courier New', monospace;
            background: #f8f9fa;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.85rem;
        }
    }
}

/* 更新记录样式 */
.updates-card {
    .updates-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .update-item {
        padding: 12px;
        background: #f8f9fa;
        border-radius: 6px;
        border-left: 3px solid #3498db;

        .update-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;

            .update-version {
                color: #3498db;
                font-weight: 600;
                font-size: 0.9rem;
            }

            .update-date {
                color: #7f8c8d;
                font-size: 0.8rem;
            }
        }

        .update-content {
            color: #2c3e50;
            font-size: 0.9rem;
            margin: 0;
            line-height: 1.4;
        }
    }
}

/* 备忘录样式 */
.memo-card {
    .memo-input {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;

        input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.9rem;

            &:focus {
                outline: none;
                border-color: #3498db;
            }
        }

        button {
            padding: 8px 16px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;

            &:hover {
                background: #2980b9;
            }
        }
    }

    .memo-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .memo-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 6px;
        transition: all 0.3s;

        &:hover {
            background: #e9ecef;
        }

        &.completed {
            opacity: 0.6;

            .memo-content span {
                text-decoration: line-through;
            }
        }

        .memo-content {
            display: flex;
            align-items: center;
            gap: 8px;

            input[type="checkbox"] {
                cursor: pointer;
            }

            span {
                font-size: 0.9rem;
                color: #2c3e50;
            }
        }

        .memo-delete {
            background: none;
            border: none;
            color: #e74c3c;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                background: #e74c3c;
                color: white;
                border-radius: 50%;
            }
        }
    }
}

/* 日历样式 */
.calendar-card {
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        button {
            background: #f8f9fa;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;

            &:hover {
                background: #e9ecef;
            }
        }

        h3 {
            margin: 0;
            color: #2c3e50;
            font-size: 1.1rem;
        }
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        text-align: center;
    }

    .calendar-weekday {
        font-size: 0.8rem;
        color: #7f8c8d;
        padding: 8px 0;
        font-weight: 500;
    }

    .calendar-day {
        padding: 8px 0;
        font-size: 0.85rem;
        border-radius: 4px;
        transition: background 0.3s;

        &.current-month {
            color: #2c3e50;
            font-weight: 500;
        }

        &:not(.current-month) {
            color: #bdc3c7;
        }

        &:hover {
            background: #f8f9fa;
        }
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .main-content-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-column {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }

    .quick-actions .actions-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-column {
        grid-template-columns: 1fr;
    }

    .main-content-grid {
        gap: 16px;
    }

    .card {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .stat-card {
        flex-direction: column;
        text-align: center;

        .card-icon {
            margin-right: 0;
            margin-bottom: 12px;
        }
    }

    .chart-header {
        flex-direction: column;
        gap: 12px;
        align-items: start;
    }
}

/* 颜色主题 */
.action-1 { background: linear-gradient(135deg, #3498db, #2980b9); }
.action-2 { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.action-3 { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.action-4 { background: linear-gradient(135deg, #f39c12, #d35400); }

.card-1 { border-left-color: #3498db; }
.card-2 { border-left-color: #2ecc71; }
.card-3 { border-left-color: #e74c3c; }
.card-4 { border-left-color: #f39c12; }
.card-5 { border-left-color: #9b59b6; }
</style>
